<script>
import {Select, Close, Avatar, PhoneFilled, Calendar, Message} from "@element-plus/icons-vue";

import {date} from "@/assets/util/date.js";
let tool = date();

export default {
  name: "Personal",
  components: {Avatar, PhoneFilled, Calendar, Message},
  data() {
    return {
      passForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      userForm: {
        nickname: '',
        email: '',
        phone: '',
        sex: ''
      },
      userData: {
        username: 'admin',
        nickname: '超级管理员',
        email: '402185277@qq.com',
        phone: '18884510717',
        createTime: new Date()
      },
      headerActive: 0,
      icon: [],
      Avatar: Avatar
    }
  },

  created() {
    this.icon.push(Select, Close);
  },
  methods: {
    submitForm() {
      this.$message.success('修改密码成功')
    },
    checkTabs(idx) {
      this.headerActive = idx;
    },
    formatTime(date) {
      return tool.formatDate(date, 'yyyy-MM-DD HH:mm');
    }
  }
}
</script>

<template>
  <div class="flex-rcs" style="height:100%;padding-left:10px;padding-right: 10px;">
    <div class="person_datum">
      <div class="title">个人资料</div>
      <div class="content">
        <el-image class="avatar"></el-image>
        <div style="text-align: center;margin-top:5px;margin-bottom:5px;
color:#033a7d;cursor:pointer;">修改头像
        </div>
        <div class="flex-rcs">
          <div class="flex-inline">
            <el-icon>
              <Avatar/>
            </el-icon>
            <label>登录名称</label>
          </div>
          <div>{{ userData.nickname }}</div>
        </div>
        <div class="flex-rcs">
          <div class="flex-inline">
            <el-icon>
              <Message/>
            </el-icon>
            <label>邮箱</label></div>
          <div>{{ userData.email }}</div>
        </div>
        <div class="flex-rcs">
          <div class="flex-inline">
            <el-icon>
              <PhoneFilled/>
            </el-icon>
            <label>手机号</label>
          </div>
          <div>{{ userData.phone }}</div>
        </div>
        <div class="flex-rcs">
          <div class="flex-inline">
            <el-icon>
              <Calendar/>
            </el-icon>
            <label>创建时间</label>
          </div>
          <div>{{ formatTime(userData.createTime) }}</div>
        </div>
      </div>
    </div>
    <div class="basic_datum">
      <div class="title">基本资料</div>
      <div class="content">
        <div class="tabs-custom">
          <div class="tabs_header flex-rn">
            <div @click="checkTabs(0)" :class="headerActive===0?'headerActive':''">
              <div>基本资料</div>
            </div>
            <div @click="checkTabs(1)" :class="headerActive===1?'headerActive':''">
              <div>修改密码</div>
            </div>
            <div style=""></div>
          </div>
          <div class="tabs_content">
            <el-form class="tabs_form" v-if="headerActive===0">
              <el-form-item label="用户名" :label-width="80">
                <el-input v-model="userForm.nickname" placeholder="请输入用户名"></el-input>
              </el-form-item>
              <el-form-item label="手机号" :label-width="80">
                <el-input v-model="userForm.phone" placeholder="请输入手机号"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" :label-width="80">
                <el-input v-model="userForm.email" placeholder="请输入邮箱"></el-input>
              </el-form-item>
              <el-form-item label="性别" :label-width="80">
                <el-radio-group v-model="userForm.sex">
                  <el-radio label="男">男</el-radio>
                  <el-radio label="女">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="" label-width="80">
                <el-button :icon="icon[0]" class="submit_btn" type="primary">保存</el-button>
                <el-button :icon="icon[1]" class="cancel_btn">取消</el-button>
              </el-form-item>
            </el-form>

            <el-form v-if="headerActive===1" class="tabs_form">
              <el-form-item label="旧密码" :label-width="80">
                <el-input v-model="passForm.oldPassword" placeholder="请输入旧密码"></el-input>
              </el-form-item>
              <el-form-item label="新密码" :label-width="80">
                <el-input v-model="passForm.newPassword" placeholder="请输入新密码"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" :label-width="80">
                <el-input v-model="passForm.confirmPassword" placeholder="请再次输入密码"></el-input>
              </el-form-item>
              <el-form-item label="" label-width="80">
                <el-button :icon="icon[0]" class="submit_btn" type="primary">
                  保存
                </el-button>
                <el-button :icon="icon[1]" class="cancel_btn">取消</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.person_datum, .basic_datum {
  border-radius: 5px;
  height: 95%;
  border: 1px solid #ccc;
  background-color: #fff;

  .title {
    border-radius: 5px 5px 0 0;
    height: 35px;
    line-height: 35px;
    background-color: rgb(240, 243, 244);
    padding-left: 10px;
  }

  .content {
    border-top: 1px solid #ccc;
  }
}

.person_datum {
  width: 25%;

  .content {
    padding: 8px;
    font-size: 14px;
    width: 90%;


    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin-left: 50%;
      transform: translateX(-50%);
    }

    .flex-rcs {
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;

      .flex-inline {
        > label {
          margin-left: 3px;
        }
      }
    }
  }
}

.basic_datum {
  width: 75%;
  margin-left: 10px;

  .content {
    height: fit-content !important;
  }
}

.tabs-custom {
  width: 90%;
  margin: 25px auto 0;
  box-shadow: #eee -2px 2px 3px;

  .tabs_header {
    height: 40px;
    line-height: 40px;
    width: 100%;

    > div {
      position: relative;
      width: 80px;
      border-bottom: 1px solid #eee;
      cursor: pointer;

      > div {
        width: 80px;
        text-align: center;
      }

    }

    > div:last-child {
      width: calc(100% - 160px);
    }

    .headerActive {
      border-left: 1px solid #eee;
      border-right: 1px solid #eee;
      border-bottom: none;
    }

    .headerActive:before {
      content: '';
      position: absolute;
      height: 3px;
      background-color: cadetblue;
      width: 80px;
    }
  }
}

.tabs_content {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.tabs_form {
  padding-top: 20px;
  width: 95%;
}

</style>
